const path = require('path');
module.exports = {
    /*
        mode可以设置打包的模式: 
            - production表示生产模式,
            - develpment表示开发模式
    */ 
    mode:'production',
    /*
        默认情况下webpack是只支持对js文件进行打包的，但是我们希望他可以对css、html甚至是图片等文件也进行打包
        这时候我们就要引入新的模块了

        以css为例
            - 我们需要引入css-loader,
                - 安装: yarn add -D css-loader
                - 使用: 
            - 但是css-loader只是帮你解析css，转换成js语句，并不会让这个样式生效, 所以我们需要一个style-loader让样式生效
                - 安装: yarn add -D style-loader
                - 使用: 
        图片等静态资源我们无需再安装新的依赖
    */ 
    module:{
        rules:[
            {
                test:/\.css$/i,//正则匹配以.css结尾的文件
                use:['style-loader','css-loader'],//对于以.css结尾的文件以css-loader作为加载器解析，style-loader让他生效，注意顺序，use中你传入的数组，会从后往前依次执行，所以要把css-loader放后面，先加载解析，再生效，和大多数的配置属性一样，对于use来说，如果你只需要用一个loader，那就直接传字符串就行了，不需要用数组
            },
            {
                test:/\.(png | jpg | gif)$/i,
                type:'asset/resource'//webpack本身就是支持加载解析图片等静态资源的，所以不需要再用use了，用type就行, 值固定为'asset/resource'
            }
        ],
    }
}